import { useState } from 'react'
import '../css/selected.scss'
import '../css/longPage/long.scss'
// 引入图标
import { LeftOutlined, RightOutlined, ArrowRightOutlined} from '@ant-design/icons';

function SelectedInvitation(props: any) {

    const { allList } = props
    // console.log(allList, 'allList11');

    // 左右箭头切换页面
    const [arrowIndex, setarrowIndex] = useState(0)
    const handleArrow = (direction: 'left' | 'right') => {
        if (direction === 'left') {
            if (arrowIndex <= -26) {
                setarrowIndex(arrowIndex + 26);
            }
        } else {
            if (arrowIndex >= -26) {
                setarrowIndex(arrowIndex - 26);
            }
        }
    }

    return (
        <div>
            <div className='RecommendBox'>
                <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                    <h2>{allList.thume} </h2>
                    <ul className='RecommendFestival'>
                        {
                            allList.festivalAll1.map((item: any, index: any) => (
                                <li key={index} className='festival_li'>{item}</li>
                            ))
                        }
                    </ul>
                </div>
                <div>查看推荐&gt;</div>
            </div>
            <div>
                <div className='labourBox'>
                    <div className='labourBox_content' style={{ transform: `translateX(${arrowIndex}%)` }}>
                        {
                            allList.Component.map((item: any,index:any) => (
                                <div key={index}>{item}</div>
                            ))
                        }
                        <div className='CreatePoster_right_more'>
                            <p className='CreatePoster_right_more_icon'><ArrowRightOutlined />  </p>
                            <p>查看更多</p>

                        </div>
                    </div>
                    {/* 左右箭头 */}
                    <button style={{ display: arrowIndex === 0 ? 'none' : 'block' }} onClick={() => handleArrow('left')} className='arrowLeft' ><LeftOutlined /></button>
                    <button style={{ display: arrowIndex <= -52 ? 'none' : 'block' }} onClick={() => handleArrow('right')} className='arrowRight'><RightOutlined /></button>
                </div>
            </div>
        </div>
    )
}

export default SelectedInvitation
